<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
<link rel="icon" href="./images/favicon.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">

<title>索尔云员工信息系统</title>

<style type="text/css">

.fade-enter-active, .fade-leave-active {
  transition: width .5s;
}
.fade-enter, .fade-leave-to{
  width: 0;
  
}


</style>

</head>
<body>

<div id="app" class="container-fluid px-1" >
	
	<form class="form-inline my-3">

		<div class="input-group input-group-sm mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text" id="basic-addon1">编号：</span>
		  </div>
		  <input v-model="query.d_id" type="text" class="form-control" placeholder="请输入编号" >
		</div>
		
		<div class="input-group input-group-sm mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text" id="basic-addon1">名称：</span>
		  </div>
		  <input @keyup="getList(1)" v-model="query.d_name"  type="text" class="form-control" placeholder="请输入名称" >
		</div>
		
		<div class="input-group input-group-sm mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text" id="basic-addon1">备注：</span>
		  </div>
		  <input v-model="query.d_remark" type="text" class="form-control" placeholder="请输入备注" >
		</div>
		
		<div class="input-group input-group-sm">
			<button @click="getList(1)" type="button" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> 查询</button>
		</div>
	
	</form>
	
	<div class="my-1" >
		<button @click="openAddWin" type="button" class="btn btn-primary">
			<i class="fa fa-plus"></i> 
			新增
		</button>
		
		<button @click="execMutiDel" type="button" class="btn btn-danger">
			<i class="fa fa-trash-o"></i> 
			删除
		</button>
	</div>
	
	<table class="table">
		<thead>
			<tr>
				<th>选择</th>
				<th>部门编号</th><th>部门名称</th><th>部门备注</th><th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in page.list" >
				<td>
					<!-- 多选框应当绑定一个数组 -->
					<input type="checkbox" :value="item.d_id" v-model="idArr" />
				</td>
				<td>{{item.d_id}}</td>
				<td>{{item.d_name}}</td>
				<td>{{item.d_remark}}</td>
				<td>
					<button @click="openUpdWin(item)" type="button" class="btn btn-primary btn-sm" >修改</button>
					<button @click="execDelete(item.d_id)" type="button" class="btn btn-danger btn-sm" >删除</button>
				</td>
			</tr>
		</tbody>
	</table>
	
	<nav style="display:flex;flex-direction: row;align-items: center;justify-content: space-between;">
	  <ul class="pagination pagination-sm">
	    <li class="page-item"><a class="page-link" href="#" @click.prevent="getList(1)" >第一页</a></li>
	    <li class="page-item"><a class="page-link" href="#" @click.prevent="getList(page.previous)" >上一页</a></li>
	    <li class="page-item"><a class="page-link" href="#" @click.prevent="getList(page.next)">下一页</a></li>
	    <li class="page-item"><a class="page-link" href="#" @click.prevent="getList(page.last)">最后一页</a></li>
	  </ul>
	  <ul class="pagination pagination-sm">
	    <li class="page-item" style="font-size:14px;">
	    	当前第{{page.pageIndex}}页{{page.size}}条记录，共{{page.pages}}页{{page.total}}条记录
	    </li>	   
	  </ul>
	</nav>
	
	
	<!-- 新增窗口 -->
	<div id="win-add" style="display:none;padding:15px">
		
		<form>
		  <div class="form-group">
		    <label>部门名称</label>
		    <input type="text" class="form-control" v-model="addData.d_name" >		    
		  </div>
		  <div class="form-group">
		    <label>部门备注</label>
		    <textarea class="form-control" rows="3" v-model="addData.d_remark" ></textarea>		
		  </div>
		  
		  <button @click="execAdd" type="button" class="btn btn-primary">提交</button>
		</form>	
	
	
	</div>
	
	<!-- 修改窗口 -->
	<div id="win-upd" style="display:none;padding:15px">
		
		<form>
		  <div class="form-group">
		    <label>部门名称</label>
		    <input type="text" class="form-control" v-model="updData.d_name" >		    
		  </div>
		  <div class="form-group">
		    <label>部门备注</label>
		    <textarea class="form-control" rows="3" v-model="updData.d_remark" ></textarea>		
		  </div>
		  
		  <button @click="execUpd" type="button" class="btn btn-primary">提交</button>
		</form>	
	
	
	</div>

</div>


<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>

<script type="text/javascript">
new Vue({
	el:'#app',
	data:{
		query:{//查询条件
			pageIndex:1,//页码
			pageSize:5,//每页记录数
			d_id:'',
			d_name:'',
			d_remark:''
		},
		//page对象内容来源于服务器，该数据时经过服务器处理的，一定是合理的
		page:{},//定义一个分页对象，其中有list（本页记录集合）、previous（上一页）、next（下一页）等属性
		
		//定义了一个数组变量，用于存放前端发来的数据
		//list:[],
		
		
		
		//定义新增数据
		addData:{
			d_name:'',
			d_remark:''
		},
		//定义新增窗口标识
		addWinIdx:null,
		
		
		//定义修改数据
		updData:{},
		
		//定义修改窗口标识
		updWinIdx:null,
		
		//存放选中行编号的数组
		idArr:[],//定义一个数组
	},
	methods:{
		getList(pageIndex=1){
			this.query.pageIndex = pageIndex;
			//访问服务器，通过get请求访问服务端地址depList获取数据
			//data是服务器回送的数据
			http_get('depList',this.query).then((data)=>{
				this.page = data;
				this.query.pageIndex = this.page.pageIndex;
				this.query.pageSize = this.page.pageSize;
			});
		},
		//打开新增窗口
		openAddWin(){
			//清空新增窗口数据
			this.addData = {
					d_name:'',
					d_remark:''
			};
			this.addWinIdx = layer.open({
				type:1,
				content:$('#win-add'),//设置窗口内容的div
				area:['700px','540px'],//设置窗口大小
				title:'新增部门',
				zIndex:1000,
			});
		},
		//执行增加
		execAdd(){
			
			//先做验证，不允许数据为空
			if(this.addData.d_name==''){
				Swal.fire({
					  icon: 'error',
					  title: '请填写部门名称！',
					  toast:true,
					  showConfirmButton:false,
					  timer:1500,
					  customClass: {						 
						  title: 'text-danger',						  
						}
					});
				
				return;
			}
			
			
			//访问服务器，通过post请求访问服务端地址depDoAdd,实现将新增数据addData传递给服务器
			http_post('depDoAdd',this.addData).then(()=>{
				this.getList(this.page.last+1);//刷新数据
				layer.close(this.addWinIdx);//关闭新增窗口
			});
		},
		
		//打开修改窗口
		openUpdWin(item){
			//this.updData = item;//给修改数据赋值
			this.updData = {//为item数据创建一个副本
					d_id:item.d_id,
					d_name:item.d_name,
					d_remark:item.d_remark
			};
			this.updWinIdx = layer.open({
				type:1,
				content:$('#win-upd'),//设置窗口内容的div
				area:['700px','540px'],//设置窗口大小
				title:'修改部门',
				zIndex:1000,
			});
		},
		
		//执行修改
		execUpd(){
			//访问服务器，通过post请求访问服务端地址depDoUpd,实现将修改后的数据updData传递给服务器
			http_post('depDoUpd',this.updData).then(()=>{//then中的函数表示成功后需要做的逻辑
				this.getList(this.page.pageIndex);//刷新数据
				layer.close(this.updWinIdx);//关闭修改窗口
			});
		},
		
		//执行删除
		execDelete(d_id){
			
			Swal.fire({
				  title: '您确定删除部门吗?',
				  text: "数据一旦删除，将不可恢复！",
				  icon: 'warning',
				  showCancelButton: true,
				  confirmButtonColor: '#3085d6',
				  cancelButtonColor: '#d33',
				  confirmButtonText: '删除',
				  cancelButtonText:'取消'
				}).then((result) => {
				  if (result.isConfirmed) {
					//{d_id}等同于 {d_id:d_id}
					http_post('depDoDel',{d_id}).then(()=>{//then中的函数表示成功后需要做的逻辑
						this.getList(this.page.pageIndex);//刷新数据
					});
				  }
				})
		},
		
		//执行多删除
		execMutiDel(){
			if(this.idArr.length==0){
				Swal.fire({
					  icon: 'error',
					  title: '请选择至少一个部门！',
					  showConfirmButton: false,
					  timer: 1500,
					  toast:true,//显示为迷你型提示
					  customClass:{
						  title:'text-danger'//text-danger是bootstrap中的一个样式类
					  }
				});
				return;
			}
			
			Swal.fire({
				  title: '您确定删除选择的部门吗?',
				  text: "数据一旦删除，将不可恢复！",
				  icon: 'warning',
				  showCancelButton: true,
				  confirmButtonColor: '#3085d6',
				  cancelButtonColor: '#d33',
				  confirmButtonText: '删除',
				  cancelButtonText:'取消'
				}).then((result) => {
				  if (result.isConfirmed) {
					
					http_post('depDoMultiDel',{d_ids:this.idArr}).then(()=>{//then中的函数表示成功后需要做的逻辑
						this.getList(this.page.pageIndex);//刷新数据
					});
				  }
				})
			
			
			
		}
	},
	mounted(){//该方法在vue将绑定的元素渲染之后(可以理解为页面加载刚刚完成后)，会立即执行
		this.getList(1);
	}
	
});


</script>

















</body>
</html>